<template>
    
    <!-- 内容容器 -->
    <div class="main-container">
    <el-row :gutter="20">
      <!-- 左侧文章区域 (3:1 比例) -->
      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" >
        <showArticle />
      </el-col>
      <!-- 右侧侧边栏 -->
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="sticky">
        <ShowUser />
        <CommentGuide />
      </el-col>
    </el-row>
  </div>

</template>
<script setup lang="ts">
import showArticle from '@/views/artilce/ShowArticle.vue';
import ShowUser from '@/views/artilce/ShowUser.vue';
import CommentGuide from '@/components/comment/CommentGuide.vue';
import { provide } from 'vue';
import { ref } from 'vue';
 
const articleContent = ref(''); // 定义一个响应式变量来存储文章内容
provide("content", articleContent); // 提供一个空的 content 变量
</script>
<style >


.left-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.el-menu {
  border-bottom: none;
}

.el-menu--horizontal .el-menu-item {
  font-size: 14px;
  color: #666;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  width: 200px;
  margin-right: 10px;
}

.main-container {
  width: 92%; /* 基础宽度 */
  max-width: 1600px; /* 最大限制 */
  min-width: 300px;  /* 最小限制 */
  margin: 20px auto;
  padding: 0 2%; /* 改用百分比内边距 */
}



/* 响应式适配 */
@media (max-width: 768px) {
  .main-container {
    width: 96%; padding: 0 3%;
  }
  
  .article-title {
    font-size: 16px;
  }
}

</style>